<template>
  <div class="admin-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="glass-card">
          <ProductSalesTotalAmountChart/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="glass-card">
          <ProductTypeProportionOfChart/>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 文字云效果 -->
    <el-row :gutter="20" style="margin-top: 40px;">
      <el-col :span="24">
        <el-card class="glass-card">
          <div class="word-cloud-header">
            <h2 class="word-cloud-title">用户最常搜的商品关键词概览</h2>
          </div>
          <div class="word-cloud-container">
            <div id="wrap" ref="wordCloudWrap">
              <a href="#" class="tag">电子产品</a>
              <a href="#" class="tag">食品饮料</a>
              <a href="#" class="tag">服装</a>
              <a href="#" class="tag">健康产品</a>
              <a href="#" class="tag">家居用品</a>
              <a href="#" class="tag">运动户外</a>
              <a href="#" class="tag">美容护肤</a>
              <a href="#" class="tag">汽车用品</a>
              <a href="#" class="tag">海鲜产品</a>
              <a href="#" class="tag">婴儿用品</a>
              <a href="#" class="tag">户外用品</a>
              <a href="#" class="tag">特惠清仓</a>
              <a href="#" class="tag">新品上市</a>
              <a href="#" class="tag">寝室用品</a>
              <a href="#" class="tag">便携</a>
              <a href="#" class="tag">海外直购</a>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {defineComponent, ref, onMounted, onUnmounted} from "vue";
import ProductSalesTotalAmountChart from "@/views/admin/chat/ProductSalesTotalAmountChart.vue";
import ProductTypeProportionOfChart from "@/views/admin/chat/ProductTypeProportionOfChart.vue";
import tools from "@/utils/tools.js";

const currentUser = ref(tools.getCurrentUser())
const wordCloudWrap = ref(null)

// 文字云相关变量
const _baseAngle = Math.PI / 360
const R = 200
let speed = 1
let angleX = speed * _baseAngle
let angleY = -speed * _baseAngle
const _focalLength = R * 1.5

let tagCloud = null
let animationInterval = null

// 文字云初始化类
class Initialization {
  constructor(options) {
    this.options = options
    this.container = options.container
    this.dataArr = options.data
    this.init()
  }

  init() {
    let len = this.dataArr.length
    let newTags = []

    for(let i = 0; i < len; i++) {
      var angleA = Math.acos((2*(i+1) - 1)/len - 1)
      var angleB = angleA * Math.sqrt(len * Math.PI)
      var z = R * Math.cos(angleA)
      var y = R * Math.sin(angleA) * Math.sin(angleB)
      var x = R * Math.sin(angleA) * Math.cos(angleB)
      var color = '#' + Math.floor(Math.random()* 0xffffff).toString(16)
      this.dataArr[i].style.color = color
      var newtag = new Tag(this.dataArr[i], x, y, z, this.options)
      newtag.move()
      newTags.push(newtag)
    }
    this.newTags = newTags
    this.animate()
  }

  rotateX() {
    let cos = Math.cos(angleX)
    let sin = Math.sin(angleX)
    this.newTags.forEach((tag) => {
      let y = tag.y * cos - tag.z * sin
      let z = tag.z*cos + tag.y * sin
      tag.y = y
      tag.z = z
    })
  }

  rotateY() {
    let cos = Math.cos(angleY)
    let sin = Math.sin(angleY)
    this.newTags.forEach((tag) => {
      let x = tag.x * cos - tag.z * sin
      let z = tag.z*cos + tag.x * sin
      tag.x = x
      tag.z = z
    })
  }

  animate() {
    const that = this
    animationInterval = setInterval(function() {
      that.rotateX()
      that.rotateY()
      that.newTags.forEach((tag)=> {
        tag.move()
      })
    }, 20)
  }
}

// Tag类
class Tag {
  constructor(data, x, y, z, options) {
    this.options = options
    this.dataArr = options.data
    this.data = data
    this.x = x
    this.y = y
    this.z = z
  }

  move() {
    var len = this.dataArr.length
    var scale = _focalLength /(_focalLength - this.z)
    var alpha = (this.z + R)/(2 * R)
    this.data.style.left = this.x + 'px'
    this.data.style.top = this.y + 'px'
    this.data.style.fontSize = 14 * scale + 'px'
    this.data.style.opacity = alpha + 0.5
  }
}

// 鼠标移动事件处理
const handleMouseMove = (e) => {
  angleY = 2 * (e.clientX/ document.body.getBoundingClientRect().width- 0.5) * speed * _baseAngle
  angleX = 2 * (e.clientY/ document.body.getBoundingClientRect().height - 0.5) * speed * _baseAngle
}

onMounted(() => {
  if (wordCloudWrap.value) {
    let tags = wordCloudWrap.value.getElementsByTagName('a')
    let wrap = wordCloudWrap.value

    let options = {
      data: tags,
      container: wrap
    }
    tagCloud = new Initialization(options)
    document.addEventListener('mousemove', handleMouseMove)
  }
})

onUnmounted(() => {
  if (animationInterval) {
    clearInterval(animationInterval)
  }
  document.removeEventListener('mousemove', handleMouseMove)
})
</script>
<style scoped>

.glass-card {
  background: rgba(6, 33, 92, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.glass-card :deep(.el-card__body) {
  color: white;
}

/* 文字云样式 */
.word-cloud-header {
  text-align: center;
  margin-bottom: 20px;
}

.word-cloud-title {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.word-cloud-container {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

#wrap {
  position: relative;
  left: 60%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
}

#wrap .tag {
  display: inline-block;
  position: absolute;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-decoration: none;
  color: white;
  padding: 0 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

#wrap .tag:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

</style>

